<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影像检查</title>
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            font-size: 18px;
            font-weight: bold;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }

        .filters {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .filter-btn {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            font-size: 14px;
            cursor: pointer;
            background-color: #f0f2f5;
            color: #333;
        }

        .filter-btn.active {
            background-color: #1890ff;
            color: white;
        }

        .filter-btn.custom {
            display: flex;
            align-items: center;
        }

        .filter-btn.custom i {
            margin-right: 5px;
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }

        .card {
            background-color: white;
            border-radius: 6px;
            padding: 20px 15px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .icon {
            font-size: 24px;
            margin-bottom: 10px;
            color: #1890ff;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon-heart {
            color: #1890ff;
        }

        .icon-brain {
            color: #1890ff;
        }

        .icon-mri {
            color: #1890ff;
        }

        .icon-ultrasound {
            color: #1890ff;
        }

        .icon-xray {
            color: #1890ff;
        }

        .card-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .card-count {
            font-size: 12px;
            color: #999;
        }

        .exam-list {
            margin-bottom: 30px;
        }

        .exam-item {
            display: flex;
            background-color: white;
            border-radius: 6px;
            padding: 16px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            position: relative;
        }

        .exam-icon {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            background-color: #e6f7ff;
            color: #1890ff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 20px;
        }

        .exam-content {
            flex: 1;
        }

        .exam-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .exam-info {
            display: flex;
            font-size: 12px;
            color: #999;
        }

        .exam-info div {
            margin-right: 15px;
            display: flex;
            align-items: center;
        }

        .exam-info i {
            margin-right: 5px;
            font-size: 14px;
        }

        .exam-status {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
        }

        .status-completed {
            color: #52c41a;
        }

        .status-pending {
            color: #faad14;
        }

        .status-abnormal {
            color: #f5222d;
        }

        .arrow {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #ccc;
        }

        .stats-section {
            margin-top: 30px;
        }

        .stats-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .chart-container {
            height: 200px;
            background-color: white;
            border-radius: 6px;
            padding: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .chart-title {
            font-size: 14px;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .card-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">影像检查</div>

    <div class="filters">
        <button class="filter-btn active">今天</button>
        <button class="filter-btn">本周</button>
        <button class="filter-btn">本月</button>
        <button class="filter-btn custom">
            <i class="fa fa-calendar"></i> 自定义
        </button>
    </div>

    <div class="card-grid">
        <div class="card">
            <div class="icon icon-heart">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                </svg>
            </div>
            <div class="card-title">心电图</div>
            <div class="card-count">共 12 次检查</div>
        </div>
        <div class="card">
            <div class="icon icon-brain">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"></circle>
                    <path d="M8 12h8"></path>
                    <path d="M12 8v8"></path>
                </svg>
            </div>
            <div class="card-title">CT</div>
            <div class="card-count">共 8 次检查</div>
        </div>
        <div class="card">
            <div class="icon icon-mri">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
                    <line x1="4" y1="22" x2="4" y2="15"></line>
                </svg>
            </div>
            <div class="card-title">MRI</div>
            <div class="card-count">共 5 次检查</div>
        </div>
        <div class="card">
            <div class="icon icon-ultrasound">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M2 12h2"></path>
                    <path d="M6 12h2"></path>
                    <path d="M10 12h2"></path>
                    <path d="M18 6l-6 6 6 6"></path>
                </svg>
            </div>
            <div class="card-title">B 超</div>
            <div class="card-count">共 15 次检查</div>
        </div>
        <div class="card">
            <div class="icon icon-xray">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="8" y1="12" x2="16" y2="12"></line>
                </svg>
            </div>
            <div class="card-title">X 光</div>
            <div class="card-count">共 20 次检查</div>
        </div>
    </div>

    <div class="exam-list">
        <div class="exam-item">
            <div class="exam-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="8" y1="12" x2="16" y2="12"></line>
                </svg>
            </div>
            <div class="exam-content">
                <div class="exam-title">右足第一跖趾关节 X 光检查</div>
                <div class="exam-info">
                    <div>
                        <i class="fa fa-calendar"></i> 2024-01-15 09:30
                    </div>
                    <div>
                        <i class="fa fa-user-md"></i> 王医生
                    </div>
                    <div>
                        <i class="fa fa-hospital"></i> 放射科
                    </div>
                </div>
            </div>
            <div class="exam-status status-completed">已完成</div>
            <div class="arrow">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </div>
        </div>

        <div class="exam-item">
            <div class="exam-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                </svg>
            </div>
            <div class="exam-content">
                <div class="exam-title">常规心电图检查</div>
                <div class="exam-info">
                    <div>
                        <i class="fa fa-calendar"></i> 2024-01-14 15:00
                    </div>
                    <div>
                        <i class="fa fa-user-md"></i> 李医生
                    </div>
                    <div>
                        <i class="fa fa-hospital"></i> 心电图室
                    </div>
                </div>
            </div>
            <div class="exam-status status-pending">待检查</div>
            <div class="arrow">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </div>
        </div>

        <div class="exam-item">
            <div class="exam-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M2 12h2"></path>
                    <path d="M6 12h2"></path>
                    <path d="M10 12h2"></path>
                    <path d="M18 6l-6 6 6 6"></path>
                </svg>
            </div>
            <div class="exam-content">
                <div class="exam-title">右足关节 B 超检查</div>
                <div class="exam-info">
                    <div>
                        <i class="fa fa-calendar"></i> 2024-01-13 10:15
                    </div>
                    <div>
                        <i class="fa fa-user-md"></i> 张医生
                    </div>
                    <div>
                        <i class="fa fa-hospital"></i> 超声科
                    </div>
                </div>
            </div>
            <div class="exam-status status-abnormal">异常</div>
            <div class="arrow">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </div>
        </div>
    </div>

    <div class="stats-section">
        <div class="stats-title">检查统计</div>

        <div class="stats-grid">
            <div class="chart-container">
                <div class="chart-title">检查类型分布</div>
                <canvas id="typeChart" width="100%" height="150"></canvas>
            </div>

            <div class="chart-container">
                <div class="chart-title">检查趋势</div>
                <canvas id="trendChart" width="100%" height="150"></canvas>
            </div>
        </div>
    </div>
</div>

<script>
    // Simple canvas chart rendering
    document.addEventListener('DOMContentLoaded', function() {
        // Pie chart for examination types
        const typeCtx = document.getElementById('typeChart').getContext('2d');
        drawPieChart(typeCtx, [
            { label: 'X光', value: 30, color: '#4e7dde' },
            { label: 'B超', value: 25, color: '#8cc152' },
            { label: '心电图', value: 20, color: '#f6bb43' },
            { label: 'CT', value: 15, color: '#ed5566' },
            { label: 'MRI', value: 10, color: '#5bcce8' }
        ]);

        // Line chart for examination trends
        const trendCtx = document.getElementById('trendChart').getContext('2d');
        drawLineChart(trendCtx,
            ['1月', '2月', '3月', '4月', '5月', '6月'],
            [7, 11, 15, 10, 16, 19]
        );
    });

    function drawPieChart(ctx, data) {
        const canvas = ctx.canvas;
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const radius = Math.min(centerX, centerY) * 0.8;

        let startAngle = 0;
        const total = data.reduce((sum, item) => sum + item.value, 0);

        // Draw pie slices
        data.forEach(item => {
            const sliceAngle = (item.value / total) * 2 * Math.PI;

            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
            ctx.closePath();

            ctx.fillStyle = item.color;
            ctx.fill();

            // Add labels
            const labelAngle = startAngle + sliceAngle / 2;
            const labelX = centerX + Math.cos(labelAngle) * (radius * 1.2);
            const labelY = centerY + Math.sin(labelAngle) * (radius * 1.2);

            ctx.font = '11px Arial';
            ctx.fillStyle = '#666';
            ctx.textAlign = 'center';
            ctx.fillText(item.label, labelX, labelY);

            startAngle += sliceAngle;
        });
    }

    function drawLineChart(ctx, labels, values) {
        const canvas = ctx.canvas;
        const width = canvas.width;
        const height = canvas.height;
        const padding = 30;

        const graphWidth = width - padding * 2;
        const graphHeight = height - padding * 2;

        // Draw axes
        ctx.beginPath();
        ctx.moveTo(padding, padding);
        ctx.lineTo(padding, height - padding);
        ctx.lineTo(width - padding, height - padding);
        ctx.strokeStyle = '#ddd';
        ctx.stroke();

        // Calculate scale
        const maxValue = Math.max(...values) * 1.2;

        // Draw horizontal grid lines
        for (let i = 0; i <= 5; i++) {
            const y = height - padding - (graphHeight * i / 5);

            ctx.beginPath();
            ctx.moveTo(padding, y);
            ctx.lineTo(width - padding, y);
            ctx.strokeStyle = '#eee';
            ctx.stroke();

            // Add y-axis labels
            ctx.font = '10px Arial';
            ctx.fillStyle = '#999';
            ctx.textAlign = 'right';
            ctx.fillText((maxValue * i / 5).toFixed(0), padding - 5, y + 3);
        }

        // Draw x-axis labels
        const xStep = graphWidth / (labels.length - 1);
        labels.forEach((label, i) => {
            const x = padding + i * xStep;

            ctx.font = '10px Arial';
            ctx.fillStyle = '#999';
            ctx.textAlign = 'center';
            ctx.fillText(label, x, height - padding + 15);
        });

        // Draw line
        ctx.beginPath();
        values.forEach((value, i) => {
            const x = padding + i * xStep;
            const y = height - padding - (value / maxValue) * graphHeight;

            if (i === 0) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
        });
        ctx.strokeStyle = '#1890ff';
        ctx.lineWidth = 2;
        ctx.stroke();

        // Draw points
        values.forEach((value, i) => {
            const x = padding + i * xStep;
            const y = height - padding - (value / maxValue) * graphHeight;

            ctx.beginPath();
            ctx.arc(x, y, 3, 0, 2 * Math.PI);
            ctx.fillStyle = '#1890ff';
            ctx.fill();
        });
    }
</script>
</body>
</html>
